<template>
  <view>
    <web-view :src="currentItem.url" :update-title="false"></web-view>
    <!-- #ifdef H5 -->
    <uni-fab :pattern="{color: '#606266', selectedColor: '#3c9cff', buttonColor: '#3c9cff'}" :content="content"
      @trigger="handleTrigger"></uni-fab>
    <!-- #endif -->

  </view>
</template>

<script>
  import {
    objToArray
  } from "@/utils/array/index.js";
  // 这里没必要使用字典，这里仅仅是为了演示字典的用法
  import {
    giteeUrlMap
  } from "@/config/dict/index.js";
  export default {
    data() {
      return {
        content: [],
        giteeUrlMap,
        currentItem: {},
      };
    },
    onLoad() {
      this.init()
    },
    methods: {
      init() {
        this.content = objToArray(giteeUrlMap, ({
          key,
          value
        }) => {
          return {
            url: `${this.$env.baseUrl}${this.$env.staticFilePath}${value}`,
            iconPath: `/static/${value.split('-')[0]}.png`,
            selectedIconPath: `/static/${value.split('-')[0]}-active.png`,
            text: key,
            active: false
          }
        })
        this.handleTrigger({
          index: 0,
          item: this.content[0]
        })
      },
      handleTrigger({
        index,
        item
      }) {
        this.currentItem = item
        this.content.forEach(item => item.active = false)
        this.content[index].active = true
      }
    },
  };
</script>

<style></style>